<!doctype html>
<html>

<head>
    <title>登录</title>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../js/jquery-2.0.3.min.js"></script>
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <script src="../../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../css/bootstrapValidator.css">
    <script src="../../js/bootstrapValidator.js"></script>
    <script src="../../js/hostConfig.js"></script>
    <script>
        var path = host_tomcatR;
    </script>
</head>

<body>

<style>
    .row {
        margin: 20px;
    }

    .error {
        color: red; /*float: right;*/
    }
</style>


<div id="content" class="container">

    <div class="jumbotron">
        <h1>欢迎登陆</h1>
    </div>

    <div id="login_box">
        <form action="/login/submit" id="formId" method="post" modelAttribute="user" class="form-horizontal">

            <div class="form-group">
                <label class="col-lg-3 control-label">手机</label>
                <div class="col-lg-4">
                    <input type="text" id="user_phone" name="user_phone" class="form-control" placeholder="手机号"
                           value="13818814491"/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-lg-3 control-label">密码</label>
                <div class="col-lg-4">
                    <input type="password" name="password" class="form-control password" id="password"/>
                    <small class="help-block error_password" style="color:#a94442;display: none;">密码错误,请重新输入</small>
                </div>
            </div>

            <div class="form-group">
                <label class="col-lg-3 control-label">
                </label>
                <label class="col-lg-4">
                    <input type="checkbox" name="is_auto_login" value="true" id="is_auto_login"> 十天之内免登陆
                </label>
            </div>

            <div class="form-group">
                <label class="col-lg-3 control-label"></label>
                <div class="col-lg-4">
                    <a href="javascript:;" class="col-lg-5 btn btn-info" id="btn-submit">登录</a>
                    <a href="/pages/reglog/register.html" class="col-lg-5 col-lg-offset-2 btn btn-info">去注册</a>
                </div>
            </div>
        </form>
    </div>
</div>

</body>

</html>

<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "post",
            url: path + "/login/isRemenberMe",
            dataType: "json",
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            success: function (data) {
                if (data.code == "0000") {
//                    alert(data.code);
                    window.location.href = "/pages/index/index.html";
                }
            },
            error: function (xhr, type) {
                alert("error");
                console.log(xhr);
            }
        });

        $("#btn-submit").bind("click", function () {
            $.ajax({
                type: "post",
                url: path + "/login/submit",
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                data: {
                    user_phone: $("#user_phone").val(),
                    password: $("#password").val(),
                    is_auto_login: $("#is_auto_login").val()
                },
                success: function (data) {
                    if (data["code"] == "0000") {
                        window.location.href = "/pages/index/index.html"
                    } else {
                        $(".error_password").show();
                    }
                },
                error: function (xhr, type) {
                    console.log(xhr);
                }
            });
        });

        $(".password").focus(function () {
            $(".error_password").hide();
        });

        $('#formId').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                user_phone: {
                    validators: {
                        notEmpty: {
                            message: '手机不能为空'
                        },
                        stringLength: {
                            /*长度提示*/
                            min: 11,
                            max: 11,
                            message: '手机长度必须是11位'
                        },
                        remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                            url: path + '/login/UserExists',//验证地址
                            message: '用户不存在',//提示消息
                            delay: 1000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                            type: 'POST'//请求方式
                        }
                    },
                    threshold: 11//有11字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，11字符以上才开始）
                },

                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            /*长度提示*/
                            min: 6,
                            max: 20,
                            message: '密码长度必须大于6位'
                        }/*最后一个没有逗号*/
                    }
                }
            }
        });
    });
</script>